<template>
  <div style="margin: 1px 0 16px">
    <!-- 面包屑导航 -->
    <el-breadcrumb class="breadcrumb" separator="/">
      <el-breadcrumb-item class="breadcrumb_item" :to="{ path: '/home/index' }">
        <span class="title">概况</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item class="breadcrumb_item" v-for="(item, i) in $route.meta.thumb" :key="item.to">
        <span :class="{ fontColor: i == endIndex }" class="title" @click="toLink(item.to)">{{ item.text }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      endIndex: "",
    };
  },
  methods: {
    getEndIndex() {
      this.endIndex = this.$route.meta.thumb.length - 1;
    },
    toLink(to) {
      if (to == null) {
        return;
      } else if (to == this.$route.path) {
        return;
      } else {
        this.$router.push(to);
      }
    },
  },
  mounted() {
    this.getEndIndex();

    // console.log('路由', this.$route);
  },
};
</script>

<style lang="scss" scoped>
.breadcrumb {
  min-width: 600px;

  ::v-deep .el-breadcrumb__inner {
    color: #c3c3c3;
    font-size: 12px;
    font-weight: normal;
  }

  ::v-deep .el-breadcrumb__separator {
    margin-left: 8px;
    margin-right: 7px;
  }

  .fontColor {
    color: #262626;
    cursor: none;
  }

  .title {
    cursor: pointer;
    transition: 0.2s;

    &:hover {
      opacity: 0.8;
      color: #262626;
    }
  }
}
</style>
